<template>
  <div>
    <el-form inline class="query-form">
      <!-- 内容输入框 -->
      <el-form-item>
        <el-select v-model="queryParams.dispatcher" placeholder="请选择调度员" size="small">
          <el-option
              v-for="item in dispatcherOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围1：">
        <el-date-picker
            v-model="queryTime1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时间范围2：">
        <el-date-picker
            v-model="queryTime2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small">
        </el-date-picker>
      </el-form-item>
      <!-- 查询按钮 -->
      <el-form-item>
        <el-button
            class="screen-btn"
            size="small"
            @click="handleQuery"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果区域 -->
    <div class="result-container">
      <!-- 第一行图表 -->
      <div class="chart-row">
        <!-- 图表1 -->
        <div class="chart-item" style="flex: 1;">
          <dv-border-box-10>
            <DispatcherChart :cdata="chartData1" />
          </dv-border-box-10>
        </div>
        <!-- 图表2 -->
        <div class="chart-item" style="flex: 1;">
          <dv-border-box-10>
            <DispatcherChart :cdata="chartData2" />
          </dv-border-box-10>
        </div>
      </div>
      <!-- 第二行图表 -->
      <div class="chart-row">
        <!-- 图表3 -->
        <div class="chart-item" style="flex: 2;">
          <dv-border-box-10>
            <DispatcherChart :cdata="chartData3" />
          </dv-border-box-10>
        </div>
        <!-- 图表2 -->
        <div class="chart-item" style="flex: 1;">
          <dv-border-box-10>
            <DispatcherChart :cdata="chartData4" />
          </dv-border-box-10>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DispatcherChart from "@/views/stats/dispatcher/DispatcherStats/chart/DispatcherChart.vue";

export default {
  data() {
    return {
      // 时间范围选择器
      queryTime1: null,
      queryTime2: null,
      // 查询参数
      queryParams: {
        dispatcher: '',
        startTime1: '',
        endTime1: '',
        startTime2: '',
        endTime2: ''
      },
      dispatcherOptions: [
        {
          value: 'zhangsan',
          label: '张三'
        },
        {
          value: 'lisi',
          label: '李四'
        },
        {
          value: 'wangwu',
          label: '王五'
        }
      ],
      chartData1: {
        categories: ['接听量', '要车量'],
        seriesData: [
          {
            name: '时间1',
            data: [554, 197]
          },
          {
            name: '时间2',
            data: [506, 228]
          }
        ]
      },
      chartData2: {
        categories: ['平均摘机用时', '平均受理用时', '平均调度用时'],
        seriesData: [
          {
            name: '时间1',
            data: [1.1, 56.08, 1.0]
          },
          {
            name: '时间2',
            data: [0.61, 65.74, 1.2]
          }
        ]
      },
      chartData3: {
        categories: ['3s摘机率', '10s摘机率', '1min调度率', '1min受理率'],
        seriesData: [
          {
            name: '时间1',
            data: [99.82, 100, 0, 62.44]
          },
          {
            name: '时间2',
            data: [99.8, 100, 0, 54.39]
          }
        ]
      },
      chartData4: {
        categories: ['平均就席时长', '平均离席时长'],
        seriesData: [
          {
            name: '时间1',
            data: [0, 0]
          },
          {
            name: '时间2',
            data: [0, 0]
          }
        ]
      }
    }
  },
  components: {
    DispatcherChart
  },
  methods: {
    // 处理查询
    handleQuery() {
      // 处理时间范围
      if (this.queryTime1 && this.queryTime1.length === 2) {
        this.queryParams.startTime1 = this.queryTime1[0].toISOString().split('T')[0]
        this.queryParams.endTime1 = this.queryTime1[1].toISOString().split('T')[0]
      } else {
        this.queryParams.startTime1 = ''
        this.queryParams.endTime1 = ''
      }
      if (this.queryTime2 && this.queryTime2.length === 2) {
        this.queryParams.startTime2 = this.queryTime2[0].toISOString().split('T')[0]
        this.queryParams.endTime2 = this.queryTime2[1].toISOString().split('T')[0]
      } else {
        this.queryParams.startTime2 = ''
        this.queryParams.endTime2 = ''
      }
      // 执行查询逻辑
      console.log('查询参数:', this.queryParams)
      // 这里可以添加实际的查询请求
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>

// 结果区域外层容器（控制图表和表格的垂直布局）
.result-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px; // 图表行与表格之间的间距
}

// 图表行布局
.chart-row {
  padding: 10px;
  display: flex;
  gap: 20px;
}

// 单个图表容器样式
.chart-item {
  padding: 5px;
  height: 380px;
}
</style>
